<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件定义</title>
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no/">
    <script src="/VUE/vue3.js"></script>
</head>
<body>
<div id="box">
    {{ myname }}

    <navbar :myname="this.myname">
        127768237486
    </navbar>

</div>
<script>
    let obj = {
        data(){
            return{
                myname:"最爱吃兽奶"
            }
        }
    }
    Vue.createApp(obj)
        .component("navbar",{
            props:["myname"],
            template: `
                <div>
                    navbar-{{ myname }}
                    <slot></slot>
                </div>
            `
        })
        .mount("#box")

    // let app = Vue.createApp(obj)
    // app.mount("#box")
    //
    // app.component("navbar", {
    //     props: ["myname"],
    //     template: `
    //             <div>
    //                 navbar-{{ myname }}
    //                 <slot></slot>
    //             </div>
    //         `
    // })

</script>
</body>
</html>